<template>
	<view>
		<!-- 首页 -->
		<Hindex v-if="PageCur=='home'" ref="HindexRef"/>
		<!-- 历史记录 -->
		<Hhistory v-if="PageCur=='history'" ref="HhistoryRef" />
		<!-- 我的 -->
		<Hmine v-if="PageCur=='mine'" ref="HmineRef" />
		<!-- 底部导航栏 -->
		<view class="height-tab" style=" height:70px" />
		<view class="cu-bar tabbar shadow foot height-tab white-bg tabContent" style="box-shadow:none"
			:class="PageCur=='history'?'tabBorder-1px':''">
			<view class="action flex-column" @click="NavChange" :class="PageCur=='home'?'text-blue':'text-gray'"
				data-cur="home">
				<image :src="PageCur=='home'?indexActive:indexDefault" :class="PageCur=='home'?'custom-text':''" />
				<text>首页</text>
			</view>
			<!-- 	<view class="action" @click="NavChange" :class="PageCur=='message'?'text-blue':'text-gray'"
				data-cur="message">
				<view :class="PageCur=='message'?'custom-text cuIcon-markfill':'cuIcon-mark'" />
				信息
			</view> -->
			<view class="action" @click="NavChange" :class="PageCur == 'history'?'text-blue':'text-gray'"
				data-cur="history">
				<image :src="PageCur=='history'?historyActive:historyDefault"
					:class="PageCur=='history'?'custom-text':''" />
				<text>历史记录</text>
			</view>
			<view class="action" @click="NavChange" :class="PageCur == 'mine'?'text-blue':'text-gray'" data-cur="mine">
				<image :src="PageCur=='mine'?mineActive:mineDefault" :class="PageCur=='mine'?'custom-text':''" />
				<text>我的</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import Hindex from '../home/index.vue'
	import Hhistory from '../history/history.vue'
	import Hmine from '../mine/mine.vue'
	import indexActive from '@/static/image/tab-index-active.png'
	import indexDefault from '@/static/image/tab-index-Default.png'
	import historyActive from '@/static/image/tab-history-active.png'
	import historyDefault from '@/static/image/tab-history-Default.png'
	import mineActive from '@/static/image/tab-mine-active.png'
	import mineDefault from '@/static/image/tab-mine-Default.png'
	// indexDefault
  import { ref, reactive, getCurrentInstance } from "vue";
  const { proxy } = getCurrentInstance()
	import onShare from '@/utils/share.js';
  import { onLoad } from "@dcloudio/uni-app";
  import {coursList, login} from '../../api/login'

	const { onShareAppMessage, onShareTimeline } = onShare()
  const courseId = ref(null)
  const HindexRef = ref(null);
  const HhistoryRef = ref(null);
  const HmineRef = ref(null);
	let PageCur = ref('home')
  onLoad((options) => {
    if(options.idCard) {
      if(!uni.getStorageSync('token')) {
        loginHandle(options)
      } else {
        if (options.idCard != uni.getStorageSync('idCard')) {
          uni.clearStorageSync()
          loginHandle(options)
        }
      }
    }
    setTimeout(() => {
      initData()
    }, 300)
  })
  const initData = () => {
    proxy.$refs.HindexRef.value.initData()
    proxy.$refs.HhistoryRef.value.initData()
    proxy.$refs.HmineRef.value.initData()
  }
  const loginHandle = (data) => {
    let length = data.idCard.length
    let requestData = {
      "idCard": data.idCard, //身份证号码
      "password": data.idCard.substring(length-6, length), //密码
      // "courseId": options.courseId, //科目id
      "code": "", //小程序code
      "bingFlag": "0", //0正常登录 1绑定微信
      "openIdFlag": "0" //是否校验openid 标志;null或者1校验 /0不校验
    }
    login(requestData, loginFailHandle).then((res) => {
      uni.setStorageSync('idCard',res.data.idCard)
      uni.setStorageSync('token', res.data.sessionKey)
      uni.setStorageSync('loginType', 'student')
      initData()
    })
  }

  const loginFailHandle = (res) => {
    uni.clearStorageSync();
    uni.showToast({
      title: res.msg,
      icon: "none"
    })
    uni.$u.route({
      type: 'redirect',
      url: '/pages/login/login'
    })
  }

	function NavChange(e) {
		// console.log(e.currentTarget.dataset.cur)
		PageCur.value = e.currentTarget.dataset.cur;
	}
</script>

<style scoped lang="scss">
	.tabBorder-1px {
		border-top: 1px solid rgba(0, 0, 0, 0.1);
	}

	.height-tab {
		// height:60px;
	}

	.text-blue {
		color: #366DE8
	}

	.action {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tabContent {
		image {
			width: 21px;
			height: 21px;
			margin-bottom: 5px;
		}
	}

	.custom-text {
		// animation-name: shark;
		animation-duration: 1.5s;
		animation-timing-function: ease-in-out;
		animation-delay: 0s;
		animation-iteration-count: 1;
		text-shadow: 3rpx 3rpx 4rpx #ffffff;
	}

	@keyframes shark {
		0% {
			transform: scale(0.9);
		}

		10% {
			transform: scale(1.05);
		}

		30% {
			transform: scale(.9);
		}

		50% {
			transform: scale(1.1);
		}

		70% {
			transform: scale(1);
		}

		100% {
			transform: scale(1);
		}
	}
</style>
